<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打字小游戏</title>
    <style type="text/css">
        #showCode {
            width: 200px;
            height: 200px;
            color: ccc;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            position: fixed;
            left: calc(50% - 100px);
            top: 100px;
            background-color: rgba(0, 0, 0, 0.6);
        }
    </style>
</head>
<body>
<div id="showCode"></div>
<script>
    var body = document.body;
    var showCode = document.querySelector("#showCode");

    function randomString() {
        //1.先生成随机的26个字母，并转换为大写
        var randomNum = 65 + parseInt(Math.random() * 26);//0-25整数，A-Z的ascii码
        //2.将Ascii码转换为字符：fromCharCode()
        var randomStr = String.fromCharCode(randomNum);
        /* console.log(randomStr);
         console.log(randomNum);*/
        //3.将随机生成的字符显示在盒子里
        showCode.innerHTML = randomStr;
    }

    randomString();
    //4.监听body触发事件，找到键盘输入的字母
    var score = 0;
    body.onkeydown = function (event) {
        //console.log(event);
        //记录键盘输入的字符并转换为大写
        var keyword = event.key.toUpperCase();
        console.log(keyword);
        console.log(showCode.innerHTML);
        if (keyword == showCode.innerHTML) {
            score++;
            console.log("你输入正确" + score + "次");
            //输入正确随机调用一次
            randomString();
        }
    }
    //计算一分钟能敲对多少单词
    var fn10 = function () {
        alert("你一分钟敲对了" + 6 * score + "个单词");
    };
    setTimeout(fn10, 10000);
</script>
</body>
</html>